import { View, Image } from "@tarojs/components"
import { Component } from 'react'
import Taro from '@tarojs/taro'
import "./sheet.scss"
import Global from "../lib/global"


interface SheetProps {
    title?: string,
    headerRightEl?: any,
    headerLeftEl?: any,
    children?: any
}

interface SheetState {
    bgAnimationData: any,
    contentAnimationData: any,
    isShow: boolean,
    isAnimating: boolean
}

class Sheet extends Component<SheetProps, SheetState> {

    bgAnimation = Taro.createAnimation({
        duration: 250,
        timingFunction: "ease-in",
        delay: 0
    })

    contentAnimation = Taro.createAnimation({
        duration: 250,
        timingFunction: "ease-in",
        delay: 0
    })


    constructor(props: SheetProps) {
        super(props)

        this.state = {
            bgAnimationData: this.bgAnimation.export(),
            contentAnimationData: this.contentAnimation.export(),
            isShow: false,
            isAnimating: false
        }
    }

    show = () => {
        this.bgAnimation.backgroundColor("rgba(0,0,0,0.39)").step()
        this.contentAnimation.translateY(0).step()
        this.setState({
            isShow: true,
            isAnimating: true,
            bgAnimationData: this.bgAnimation.export(),
            contentAnimationData: this.contentAnimation.export(),
            
        })
    }

    hide = (e) => {
        e.stopPropagation()
        e.preventDefault()

        this.bgAnimation.backgroundColor("transparent").step()
        this.contentAnimation.translateY("100%").step()

        this.setState({
            bgAnimationData: this.bgAnimation.export(),
            contentAnimationData: this.contentAnimation.export(),
            isAnimating: true,
            isShow: false
        })
    }

    private onTransitionEnd = () => {
        this.setState({
            isAnimating: false
        })
    }

    render() {

        let headerRightEl
        if (this.props.headerRightEl) {
            headerRightEl = this.props.headerRightEl
        } else {
            headerRightEl = <Image className="sheet-close-btn" src={ Global.loadImage("icon_close@3x.png") } onClick={ this.hide }/>
        }

        return (
            <View 
                className="sheet" 
                style={{ visibility: this.state.isShow ? "visible" : this.state.isAnimating ? "visible" : "hidden" }}
                animation={ this.state.bgAnimationData }
                onTransitionEnd={ this.onTransitionEnd }
                >

                <View className="sheet-touch-layer"  onClick={ this.hide } style={{display: this.state.isShow ? "block" : "none"}}></View>

                <View 
                    className="sheet-content"
                    animation={ this.state.contentAnimationData }>

                    <View>
                        <View className="sheet-header">
                            <View className="sheet-header-el">{ this.props.headerLeftEl }</View>
                            <View className="sheet-title">{ this.props.title }</View>
                            <View className="sheet-header-el">{ headerRightEl }</View>
                        </View>

                        <View className="sheet-body">
                            { this.props.children }
                        </View>
                        
                    </View>
                </View>
            </View>
        )
    }
}

export default Sheet